<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/user/static/element.css">
  <title>用户管理</title>
  <style>
    #app {
      width: 100%;
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .header {
      flex: 0 0 60px;
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .main {
      flex: 1;
      background-color: #E9EEF3;
      color: #333;
    }
    
    .user-set {
      padding: 5px 10px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="header">用户管理</div>
    <div class="main">
      <div class="user-set">
        <el-button type="primary" size="small" @click="pageChange">首页</el-button>
        <el-button type="primary" size="small" @click="addClick">新建用户</el-button>
        <!-- <el-button type="primary" size="small" @click="testUser">检测用户</el-button> -->
      </div>
      <div class="user-content">
        <el-table :data="tableData">
          <el-table-column prop="name" label="用户名"></el-table-column>
          <el-table-column prop="rank" label="用户级别"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="editClick(scope.row)" type="primary" size="small">编辑</el-button>
              <el-button @click="delClick(scope.row)" type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible">
      <el-form label-width="80px" :model="formLabelAlign">
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="formLabelAlign.password"></el-input>
        </el-form-item>
        <el-form-item label="用户级别">
          <el-input-number v-model="formLabelAlign.rank" controls-position="right" :min="1" :max="9"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</body>
<script src="/user/static/vue.js"></script>
<script src="/user/static/element.js"></script>
<script src="/user/static/axios.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        dialogVisible: false,
        isAdd: true,
        formLabelAlign: {
          name: '',
          password: '',
          rank: ''
        },
        tableData: []
      }
    },
    created() {
      this.getUser()
    },
    methods: {
      pageChange() {
        window.location.href= '/'
      },
      editClick(row) {
        this.dialogVisible = true
        this.formLabelAlign = JSON.parse(JSON.stringify(row))
        this.isAdd = false
      },
      delClick(row) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delUser(row)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        })
      },
      addClick() {
        this.dialogVisible = true
        this.isAdd = true
      },
      confirm() {
        if (this.isAdd) {
          this.addUser(this.formLabelAlign)
        } else {
          this.editUser(this.formLabelAlign)
        }
      },
      cancel() {
        this.dialogVisible = false
      },
      getUser() {
        axios.get('/api/user/getUser')
          .then(res => {
            let arr = []
            for (let item in res.data) {
              arr.push(res.data[item])
            }
            this.formLabelAlign = {
              name: '',
              password: '',
              rank: ''
            }
            this.tableData = arr
          }).catch(err => console.log('error', err))
      },
      addUser(data) {
        axios.post('/api/user/addUser', data)
        .then(data => {
          this.dialogVisible = false
          this.getUser()
        }).catch(err => console.log('error', err))
      },
      editUser(data) {
        axios.put(`/api/user/editUser/${data.id}`, data)
        .then(data => {
          this.dialogVisible = false
          this.getUser()
        }).catch(err => console.log('error', err))
      },
      delUser(data) {
        axios.delete(`/api/user/delUser/${data.id}`)
          .then(data => {
            this.getUser()
          }).catch(err => console.log('error', err))
      },
      testUser() {
        axios.post('/api/user/testUser', {
          name: 'admin',
          password: 'admin'
        }).then(data => console.log(data))
        .catch(err => console.log('error', err))
      },
    }
  })
</script>
</html>